<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" show-fullscreen destroy-on-close width="750px" @close="close">
		<el-form ref="formRef" label-width="120px" :model="formData" :rules="rules">
			<el-form-item label="产品" prop="productId">
				<el-input v-model="this.model.product.itemName" disabled />
			</el-form-item>
			<el-form-item label="工艺路线" prop="routingId">
				<el-input v-model="this.model.routing.routingName" disabled />
			</el-form-item>
			<el-form-item label="工序" prop="processId">
				<el-input v-model="this.model.process.procName" disabled />
			</el-form-item>
			<el-form-item label="物料" prop="materialId">
				<MaterialTableSelect v-model="selectedMaterial" placeholder="输选择物料" @change="change" />
			</el-form-item>
			<el-form-item label="需求数量" prop="qty">
				<el-input-number v-model="formData.qty" :min="1" :max="10" />
			</el-form-item>
			<el-form-item label="物料来源工位" prop="sourceOpId">
				<OpTableSelect v-model="opSelectValue" @change="opChange" />
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
import MaterialTableSelect from "../../components/MaterialTableSelect";
import OpTableSelect from "../../components/OpTableSelect";

export default {
	emits: ['complete'],
	components: {
		MaterialTableSelect,
		OpTableSelect,
	},
	data() {
		return {
			mode: "add",
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			isSaveing: false,
			visible: false,
			selectedMaterial: {},
			opSelectValue: {},
			model: {},
			formData: {
				id: 0,
				productId: undefined,
				routingId: undefined,
				processId: undefined,
				materialId: undefined,
				materialCode: '',
				qty: 1,
				sourceOpId: undefined,
				sourceRawOpCode: '',
			},
			rules: {
				productId: [{ required: true, message: "请输入产品", trigger: "blur" }],
				routingId: [{ required: true, message: "请输入工艺路线", trigger: "blur" }],
				processId: [{ required: true, message: "请选择工序", trigger: "blur" }],
				materialId: [{ required: true, message: "请选择物料", trigger: "blur" }],
				qty: [{ required: true, message: "请输入需求数量", trigger: "blur" }],
			},
		};
	},
	methods: {
		change(item) {
			this.formData.materialId = item.id;
			this.formData.materialCode = item.itemCode;
		},
		opChange(item) {
			this.formData.sourceOpId = item.id;
			this.formData.sourceRawOpCode = item.id > 0 ? `${item.lineCode}_${item.opCode}` : '';
		},
		async open(row) {
			this.model = row;
			this.formData.productId = this.model.product.id;
			this.formData.routingId = this.model.routing.id;
			this.formData.processId = this.model.process.id;

			if (!row.id) {
				this.mode = "add";
			} else {
				this.mode = "edit";
				this.formData.id = row.id;
				this.formData.materialId = row.materialId;
				this.formData.materialCode = row.materialCode;
				this.formData.qty = row.qty;
				this.formData.sourceOpId = row.sourceOpId;
				this.formData.sourceRawOpCode = row.sourceRawOpCode;

				this.selectedMaterial = { id: row.materialId, itemName: row.material.itemName };
				this.opSelectValue = { id: this.formData.sourceOpId, opCode: this.formData.sourceRawOpCode };
			}

			this.visible = true;
		},
		save() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let resp = null;
					if (this.formData.id === 0) {
						resp = await this.$API.procbom.add.post(this.formData);
					} else {
						resp = await this.$API.procbom.update.put(this.formData);
					}
					this.isSaveing = false;
					if (resp.code == 200) {
						this.$emit("complete");
						this.visible = false;
						this.$message.success("保存成功");
					} else {
						this.$alert(resp.message, "提示", { type: "error" });
					}
				}
			});
		},
		close() {
			this.selectedMaterial = {};
			this.opSelectValue = {};
			this.formData = {
				id: 0,
				productId: undefined,
				routingId: undefined,
				processId: undefined,
				materialId: undefined,
				materialCode: '',
				qty: 1,
				sourceOpId: undefined,
				sourceRawOpCode: '',
			};
			this.$refs.formRef.resetFields();
			this.visible = false;
		},
	},
};
</script>
